<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据管理 - 招聘数据分析平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>招聘数据可视化分析系统</h2>
            </div>

            <!-- 用户信息卡片 -->
            <div class="user-profile">
                <div class="user-avatar">
                    <img src="https://via.placeholder.com/60x60/4A90E2/FFFFFF?text={{ session.user.username[0]|upper }}"
                        alt="用户头像">
                </div>
                <div class="user-info">
                    <p class="user-greeting">欢迎回来</p>
                    <p class="username">{{ session.user.username }}</p>
                </div>
                <form action="{{ url_for('logout') }}" method="post" class="logout-form">
                    <button type="submit" class="logout-btn">退出登录</button>
                </form>
            </div>

            <!-- 导航菜单 -->
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="{{ url_for('home') }}" class="nav-item">
                            <span class="nav-icon">🏠</span>
                            <span class="nav-text">首页</span>
                        </a></li>
                    <li><a href="{{ url_for('profile') }}" class="nav-item">
                            <span class="nav-icon">👤</span>
                            <span class="nav-text">个人中心</span>
                        </a></li>
                    <li><a href="{{ url_for('data_management') }}" class="nav-item active">
                            <span class="nav-icon">💼</span>
                            <span class="nav-text">数据管理</span>
                        </a></li>

                    <li><a href="{{ url_for('charts') }}" class="nav-item">
                            <span class="nav-icon">📈</span>
                            <span class="nav-text">可视化图表</span>
                        </a></li>
                </ul>
            </nav>
        </div>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 页面头部 -->
            <header class="page-header">
                <h1>数据管理</h1>
                <div class="header-actions">
                    <input type="text" id="searchInput" class="search-input" placeholder="搜索职位、公司或地址...">
                    <button class="btn btn-primary" id="addJobBtn">新增数据</button>
                </div>
            </header>

            <!-- 数据表格 -->
            <div class="content-area">
                <div class="card">
                    <div class="card-content">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>职位名称</th>
                                    <th>公司名称</th>
                                    <th>薪资</th>
                                    <th>地址</th>
                                    <th>经验要求</th>
                                    <th>学历要求</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="jobsTableBody">
                                {% if jobs %}
                                {% for job in jobs %}
                                <tr>
                                    <td>{{ job[0] }}</td>
                                    <td>{{ job[1] }}</td>
                                    <td>{{ job[2] }}</td>
                                    <td>{{ job[3] }}</td>
                                    <td>{{ job[4] }}</td>
                                    <td>{{ job[5] }}</td>
                                    <td>{{ job[6] }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-secondary edit-btn"
                                            data-id="{{ job[0] }}">编辑</button>
                                        <button class="btn btn-sm btn-danger delete-btn"
                                            data-id="{{ job[0] }}">删除</button>
                                    </td>
                                </tr>
                                {% endfor %}
                                {% else %}
                                <tr>
                                    <td colspan="8" class="text-center">
                                        {% if error %}
                                        {{ error }}
                                        {% else %}
                                        暂无数据
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页控件 -->
                    <div class="pagination" id="pagination"></div>
                </div>
            </div>
        </main>
    </div>

    <!-- 新增/编辑模态框 -->
    <div id="jobModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2 id="modalTitle">新增职位</h2>
            <form id="jobForm">
                <input type="hidden" id="jobId">
                <div class="form-group">
                    <label for="jobName">职位名称</label>
                    <input type="text" id="jobName" required>
                </div>
                <div class="form-group">
                    <label for="companyName">公司名称</label>
                    <input type="text" id="companyName" required>
                </div>
                <div class="form-group">
                    <label for="salary">薪资</label>
                    <input type="text" id="salary" required>
                </div>
                <div class="form-group">
                    <label for="address">地址</label>
                    <input type="text" id="address" required>
                </div>
                <div class="form-group">
                    <label for="experience">经验要求</label>
                    <input type="text" id="experience">
                </div>
                <div class="form-group">
                    <label for="educational">学历要求</label>
                    <input type="text" id="educational">
                </div>
                <div class="form-group">
                    <label for="jobDetail">职位详情</label>
                    <textarea id="jobDetail" rows="4"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/data_management.js') }}"></script>
</body>

</html>